<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery表单input框选择器</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>
    <script type="text/javascript">
           function fun1(){
              var data = $(":text").val();
              alert("文本框输入内容是 "+data);
               /*
               *   val()函数,jquery对象提供功能函数,用于读取jquery对象[第一个Dom对象的value属性]
               *
               * */
           }


           function fun2(){
               var data = $(":password").val();
               alert("密码框输入内容是 "+data);
               /*
                *   val()函数,jquery对象提供功能函数,用于读取jquery对象[第一个Dom对象的value属性]
                *
                * */
           }
          function fun3(){

              var $obj = $(":radio");
//              for(var i=0;i<$obj.length;i++){
//                    var domObj = $obj[i];
//                    alert($(domObj).val());
//              }

               $obj.each(
                       function (index,domObj){
                             alert("第"+index+"个radio的vallue是 "+$(domObj).val());
                       }
               );
              /*
              *   each函数遍历时,每次读取一个dom对象和dom对象在jquery对象存储位置
              *   然后将这两个数据交给  [回调函数]进行处理
              *
              *     for(var i=0;i<$obj.length;i++){
              *
              *          var domObj  = $obj[i]
              *          fun1(i,domObj);
              *     }
              *
              *     function fun1(index,dom){
              *
              *     }
              *
              * */
          }
          function  fun4(){
               alert($(":file").val());
          }

          function fun5(){
             var $obj = $(":checkbox:checked");
             $obj.each(

                    function (index,domObj){

                          alert($(domObj).val())
                    }
             );
          }
    </script>
</head>
<body>
    <!--定义表单-->
    <form id="myForm" action="">
        用户名：
            <input type="text" name="username"/><br><br>
        密&nbsp;&nbsp;码：
            <input type="password" name="password"/><br><br>
        性&nbsp;&nbsp;别：
            <input type="radio" name="gender" value="1" checked/>男
            <input type="radio" name="gender" value="0"/>女<br><br>
        照&nbsp;&nbsp;片：
            <input type="file" name="photo"/><br><br>
        兴&nbsp;&nbsp;趣：
            <input type="checkbox" name="interest" value="music" checked/>音乐
            <input type="checkbox" name="interest" value="food"/>美食
            <input type="checkbox" name="interest" value="travel"/>旅游
            <input type="checkbox" name="interest" value="shopping"/>购物
            <br><br>
            <input type="submit" value="提交"/>
    </form>
    <br><br>
    <!--定义按钮-->
    <button id="btn01" onclick="fun1()">选择文本输入框并输出用户输入的值</button>
    <button id="btn02" onclick="fun2()">选择密码输入框输出用户输入的密码</button>
    <button id="btn03" onclick="fun3()">选择单选框的value属性值</button>
    <button id="btn04" onclick="fun4()">选择文件上传框并输出用户选择的文件</button>
    <button id="btn05" onclick="fun5()">选择复选框并输出用户选择的值</button>
</body>
</html>